<template>
  <el-form :key="forceIndex" :model="form" ref="modelForm" :inline="true" class="common-form">
    <el-row>
      <el-col v-for="(item, index) in options" :key="index" :span="item.colSpan">
        <el-form-item :label="item.name">
          <component
            :is="item.type"
            v-bind="attrs"
            :serverOption="item.serverOption"
            :key="index"
            :fn="item.fn"
            :attr="item.attr"
            :formItem="form"
          ></component>
        </el-form-item>
      </el-col>
      <el-row type="flex" class="row-bg" justify="start">
        <slot name="startBtn"></slot>
        <slot>
          <el-button type="primary" @click="searchList">
            <template #icon>
              <el-icon><search /></el-icon>
            </template>
            查询
          </el-button>
          <el-button class="search-btn" plain @click="exportExcel" type="default">
            <template #icon>
              <el-icon><download /></el-icon>
            </template>
            导出
          </el-button>
        </slot>

        <slot name="btn"></slot>
      </el-row>
    </el-row>
  </el-form>
</template>
<script lang="ts">
import mSelect from './component/select.vue'
import dateTime from './component/dateTime.vue'
import mSwitch from './component/switch.vue'
import mInput from './component/input.vue'
// const prov = () => import('./component/prov.vue')
// const site = () => import('./component/site.vue')
// const tsf = () => import('./component/tsf.vue')
interface optionType {
  name: string
  type: any | string
  colSpan: number
  attr: any
  serverOption?: any
  [propName: string]: any
}
export default defineComponent({
  name: 'TableSearch',
  // components: { region, prov, site, tsf },
  components: { mSelect, dateTime, mSwitch, mInput },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array as any
    }
  },
  setup(props, ctx) {
    const attrs = ctx.attrs
    const emit = ctx.emit
    const forceIndex = ref(0)
    watch(
      () => props.options,
      (newValue) => {
        forceIndex.value++
      },
      {
        deep: true
      }
    )
    const searchList = () => {
      emit('searchList')
    }
    const exportExcel = () => {
      emit('exportExcel')
    }
    return {
      attrs,
      forceIndex,
      searchList,
      exportExcel
      // ...toRefs(state)
    }
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-form-item--small.el-form-item) {
  width: 100%;
  padding-right: 10px;
}
.row-bg {
  justify-content: flex-end;
  margin-bottom: 10px;
}
:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 10px !important;
}
.common-form {
}
:deep(.el-input, .el-input__wrapper) {
  width: 100% !important;
}
:deep(.el-form-item) {
  width: 100%;
  padding-right: 12px;
  margin-right: 0;
}
</style>
